<!--
 * @Description: file content
 * @Author: oooh
 * @Date: 2024-04-27 16:59:19
 * @LastEditors: hujunjie hujunjie@shudatech.cn
 * @LastEditTime: 2024-12-13 14:42:13
 * @FilePath: \Civil_Servant_Performance_PC\src\views\performance-inventory\index.vue
-->
<template>
  <div class="app-container performance-inventory">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
      <el-form-item label="" prop="year">
        <el-select v-model="queryParams.year" placeholder="选择年份" @change="handleYearChange">
          <el-option
            v-for="item in dict.type.biz_work_year_list"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="" prop="quarter">
        <el-select
          v-model="queryParams.quarter"
          placeholder="选择季度"
          class="ml-10"
          @change="handleQuarterChange"
        >
          <el-option
            v-for="item in quarterOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item
        label=""
        prop="deptId"
        v-hasPermi="['performance-inventory:dept:select']"
      >
        <el-cascader
          class="ml-10"
          v-model="queryParams.deptId"
          :options="deptOptions"
          :show-all-levels="false"
          :props="{
            checkStrictly: true,
            value: 'deptId',
            label: 'deptName',
            checkStrictly: true,
            emitPath: false,
          }"
          placeholder="输入站办所名称查询"
          filterable
          clearable
          @change="handleDeptChange"
          ref="CascaderRef"
        ></el-cascader>
      </el-form-item>
      <el-form-item
        label=""
        v-show="activeTabs === 'civil'"
        v-hasPermi="['performance-inventory:civil:select']"
      >
        <el-select
          v-model="queryParams.civilServantId"
          placeholder="输入干部名称查询"
          class="ml-10"
          clearable
          filterable
        >
          <el-option
            v-for="item in civilOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <!-- <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> -->
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
          >重置</el-button
        >
      </el-form-item>
    </el-form>

    <el-tabs v-model="activeTabs" type="card" @tab-click="handleTabsChange">
      <el-tab-pane
        label="站办所绩效清单"
        name="dept"
        v-if="$auth.hasPermi('performance-inventory:dept:list')"
      >
      </el-tab-pane>
      <el-tab-pane
        label="个人绩效清单"
        name="civil"
        v-if="$auth.hasPermi('performance-inventory:civil:list')"
        v-hasPermi="['performance-inventory:civil:list']"
      >
      </el-tab-pane>
    </el-tabs>
    <div class="flex" style="flex: 1; overflow: hidden">
      <el-tabs
        v-model="activeLeftTabs"
        tab-position="left"
        @tab-click="handleLeftTabsChange"
      >
        <el-tab-pane
          v-for="item of tabsList"
          :key="item.name"
          :label="item.label"
          :name="item.name"
        >
        </el-tab-pane>
      </el-tabs>
      <div style="flex: 1; overflow: hidden">
        <component :is="dynamicComponent" :query-form="queryParams"></component>
      </div>
    </div>
  </div>
</template>

<script>
import keyWork from "./dept/key-work.vue";
import centerWork from "./dept/center-work.vue";
import jxbEvaluationComment from "./dept/jxb-evaluation-comment.vue";
import jjbEvaluationComment from "./dept/jjb-evaluation-comment.vue";
import negativeList from "./dept/negative-list.vue";
import quarterPerformance from "./dept/quarter-performance.vue";
import workTraining from "./dept/work-training.vue"
import workList from "./civil/work-list.vue";
import excellentRating from "./civil/excellent-rating.vue";
import annualHonor from "./civil/annual-honor.vue";
import civilNegativeList from "./civil/negative-list.vue";
import democraticEvaluation from "./civil/democratic-evaluation.vue";
import cadrePerformance from "./civil/cadre-performance.vue";
import deptHonor from "./dept/dept-honor.vue";
import dailyPerformance from "./civil/daily-performance.vue";
import { quarterFormat, quarterToMonth } from "@/utils/quarter.js";
import { deptTreeSelect } from "@/api/system/user";
import { list as listCivil } from "@/api/organization/civil-servant";

export default {
  name: "performance-inventory",
  dicts: ["biz_work_year_list"],
  props: {},
  components: {
    keyWork,
    centerWork,
    jxbEvaluationComment,
    jjbEvaluationComment,
    negativeList,
    quarterPerformance,
    workTraining,
    workList,
    excellentRating,
    annualHonor,
    civilNegativeList,
    democraticEvaluation,
    cadrePerformance,
    deptHonor,
    dailyPerformance,
  },
  data() {
    return {
      tabsList: [],
      civilTabsList: [
        {
          label: "绩效汇总",
          name: "cadre-performance",
          auth: "performance-inventory:civil:quarter-performance",
        },
        {
          label: "工作任务",
          name: "work-list",
          auth: "performance-inventory:civil:work",
        },
        {
          label: "民主测评",
          name: "democratic-evaluation",
          auth: "performance-inventory:civil:democratic-evaluation",
        },
        {
          label: "争先创优",
          name: "excellent-rating",
          auth: "performance-inventory:civil:excellent-rating",
        },
        {
          label: "负面清单",
          name: "civil-negative-list",
          auth: "performance-inventory:civil:negative",
        },
        {
          label: "年度荣誉",
          name: "annual-honor",
          auth: "performance-inventory:civil:annual-honor",
        },
        {
          label: "平时考核登记表",
          name: "daily-performance",
          auth: "performance-inventory:civil:daily-performance",
        },
      ],
      deptTabsList: [
        {
          label: "绩效汇总",
          name: "quarter-performance",
          auth: "performance-inventory:dept:quarter-performance",
        },
        {
          label: "重点工作",
          name: "key-work",
          auth: "performance-inventory:dept:key-work",
        },
        {
          label: "中心工作",
          name: "center-work",
          auth: "performance-inventory:dept:center-work",
        },
        {
          label: "外部评价",
          name: "jxb-evaluation-comment",
          auth: "performance-inventory:dept:jxb-evaluation-comment",
        },
        {
          label: "纪检评议",
          name: "jjb-evaluation-comment",
          auth: "performance-inventory:dept:jjb-evaluation-comment",
        },
        {
          label: "负面清单",
          name: "negative-list",
          auth: "performance-inventory:dept:negative",
        },
        {
          label: "荣誉推介",
          name: "dept-honor",
          auth: "performance-inventory:dept:dept-honor",
        },
        {
          label: "培训记录",
          name: "work-training",
          auth: "performance-inventory:dept:work-training",
        },
      ],
      deptOptions: [],
      quarterOptions: [],
      civilOptions: [],
      queryParams: {
        year: "",
        quarter: "",
        deptId: "",
        civilServantId: "",
      },
      activeTabs: "",
      activeLeftTabs: "",
      civilTabs: "",
      deptTabs: "",
      dynamicComponent: "",
    };
  },
  computed: {},
  watch: {
    // 监听 $route 对象的变化
    $route: {
      immediate: true,
      handler(to, from) {
        let { query } = to;
        if (query.deptId) this.queryParams.deptId = Number(query.deptId);
        if (query.civilServantId)
          this.queryParams.civilServantId = String(query.civilServantId);

        this.handleYearChange(
          query.year ? String(query.year) : new Date().getFullYear(),
          query.quarter ? Number(query.quarter) : ""
        );
        if (query.type) {
          this.activeTabs = query.type;
          if (query.type === "dept") {
            this.tabsFilter(this.deptTabsList);
          } else if (query.type === "civil") {
            this.tabsFilter(this.civilTabsList);
          }
          this.handleLeftTabsChange({ name: query.tabs });
        } else {
          this.init();
        }
      },
    },
  },

  created() {},
  methods: {
    init() {
      let tabList = [];
      if (this.$auth.hasPermi("performance-inventory:dept:list")) {
        this.activeTabs = "dept";
        tabList = this.deptTabsList;
      } else if (this.$auth.hasPermi("performance-inventory:civil:list")) {
        this.activeTabs = "civil";
        tabList = this.civilTabsList;
      }
      this.tabsFilter(tabList);
      this.handleLeftTabsChange(this.tabsList[0]);
    },
    async getCivilList(init) {
      this.civilOptions = [];
      await listCivil({
        deptId: this.queryParams.deptId,
        assessmentMark: true,
      }).then((res) => {
        this.civilOptions = res.rows.map((item) => {
          return { label: item.name, value: item.id };
        });
        // if (this.queryParams.civilServantId) {
        //   this.queryParams.civilServantId = String(this.civilOptions[0].value)
        // }
      });
    },
    handleQuery() {},
    /** 查询站办所下拉树结构 */
    async getDeptTree() {
      await deptTreeSelect({
        year: this.queryParams.year,
        quarter: this.queryParams.quarter,
      }).then((response) => {
        this.deptOptions = this.removeEmptyChildren(response.data);
        // if (!this.queryParams.deptId) this.queryParams.deptId = this.deptOptions[0].deptId
        this.getCivilList();
      });
    },
    // 选择站办所
    handleDeptChange(val) {
      this.$refs.CascaderRef.dropDownVisible = false;
      this.getCivilList();
    },
    // tabs列表数据过滤
    tabsFilter(list) {
      this.tabsList = list.filter((item) => {
        return this.$auth.hasPermi(item.auth);
      });
    },
    // 年度选择
    handleYearChange(year, quarterParams) {
      this.queryParams.year = year;
      // 获取当前季度、季度列表（往年默认第一季度）
      let { quarter, quarterList } = quarterFormat(year);
      this.quarterOptions = quarterList;
      this.handleQuarterChange(quarterParams || quarter);
    },
    // 季度选择
    handleQuarterChange(quarter) {
      this.queryParams.quarter = quarter;
      this.getDeptTree();
    },
    // 重置查询条件
    resetQuery() {
      this.queryParams.deptId = "";
      if (this.activeLeftTabs !== "daily-performance") {
        // this.queryParams.civilServantId = undefined
      }
      this.handleYearChange(new Date().getFullYear());
    },
    // 删除非共用查询条件
    removeNonSharedQuery() {
      for (let key of Object.keys(this.queryParams)) {
        if (key !== "year" && key !== "quarter" && key !== "deptId") {
          delete this.queryParams[key];
        }
      }
    },
    handleTabsChange(tab) {
      if (tab.name === "dept") {
        this.tabsFilter(this.deptTabsList);
        if (!this.deptTabs) this.deptTabs = this.deptTabsList[0];
        this.handleLeftTabsChange(this.deptTabs);
      } else if (tab.name === "civil") {
        this.tabsFilter(this.civilTabsList);
        if (!this.civilTabs) this.civilTabs = this.civilTabsList[0];
        this.handleLeftTabsChange(this.civilTabs);
      }
    },
    async handleLeftTabsChange(tab) {
      if (tab.name === "daily-performance") {
        await this.getCivilList("init");
        // this.queryParams.civilServantId = this.civilOptions[0] ? this.civilOptions[0].value : undefined
      }
      this.activeLeftTabs = tab.name;
      if (this.activeTabs === "dept") {
        this.deptTabs = tab;
      } else if (this.activeTabs === "civil") {
        this.civilTabs = tab;
      }
      this.removeNonSharedQuery();
      this.dynamicComponent = tab.name;
    },
  },
};
</script>

<style lang="scss">
::v-deep .el-date-editor {
  width: auto;
}

::v-deep .el-input-number {
  width: auto;
}
.performance-inventory {
  display: flex;
  flex-direction: column;
  height: 100%;
  .component-container {
    display: flex;
    flex-direction: column;
    height: 100%;
    .flex-table {
      height: 100%;
      flex: 1;
      overflow: hidden;
    }
  }
}
</style>
